<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.6.min.js"></script>



<script src="zide.js"></script>

<script src="tools.js"></script>

<script src="butter.js"></script>

<script src="butter-header.js"></script>

<script src="butterButtonState.js"></script>

<script src="text-decoration-helpers.js"></script>

<script src="wite-helpers.js"></script>

<script type="text/javascript">
$(document).bind("ready", function(){
	$("#kobe div").attr("contentEditable", "true")

                $("#kobe").css({
                    "outline": "0px solid transparent"
                })
	
	
	$(".butterButton").bind("click", function(){			
		
		state.mousedown = false;

		// the style name variable
		var buttonName = this.id;
		
		var styleName = $(this).data("styleName")	
		var styleValue = $(this).data("styleValue")
		
		var buttonState = butter.buttonState[buttonName];
		
		var onState, offState, buttonValue, buttonState;			
		if(styleValue){
			onState = butter.buttonOnStates[buttonName];
			buttonValue = styleValue;
			
		} else {
			onState = butter.buttonOnStates[styleName];
			offState = butter.buttonOffStates[styleName]	
			buttonValue = butter.button_Match[styleName];
			
		}
	
		
		var range = window.getSelection().getRangeAt(0);	
		
		cloneContents = range.cloneContents();				

		strLen = range.commonAncestorContainer.textContent.length;
		
		selectionLen = range.cloneContents().textContent.length;
		
		if(strLen != selectionLen){
			currentRange = window.getSelection().getRangeAt(0);
			
			if(buttonState == 1 && styleName == "text-decoration"){	
					
					
					textDecorationOff(buttonName,styleValue);
									
			} else {
			
				cloneContents = currentRange.cloneContents();
				startContainer = currentRange.startContainer;
				
				temp = range.extractContents()		
				
				container = document.createElement("span");
				
				$(container).append(temp);	
				
				if(buttonState == 0){
					
					
					butter.buttonState[buttonName] = 1;
					
					setCSS(container, styleName, buttonValue, 1);
				} else {
					
					butter.buttonState[buttonName] = 0;
					
					setCSS(container, styleName, butter.button_MatchOff[styleName], 0);	
				}

					
				if(cloneContents.childNodes & cloneContents.childNodes[0].nodeType == 1){
				
					newR = document.createRange();
					newR.setStartAfter(startContainer.parentNode);
					
					newR.insertNode(container);
				
				} else {
					currentRange.insertNode(container);	
				}	 
				
				
				$(container).find("span").each(function(){
					if(butter.buttonState[buttonName] == 0){	
						if(member1(styleName, $(this).css(styleName),butter.buttonOnStates[buttonName])){
							
							setCSS(this, styleName, butter.button_MatchOff[styleName], 0);	
						}
					} else if (butter.buttonState[buttonName] == 1){
						
						if(member1(styleName, $(this).css(styleName), butter.buttonOffStates[buttonName])){
						
							setCSS(this, styleName, butter.button_Match[styleName], 1);
						}		
					}
				});		
						
						
				var selection = window.getSelection();
				
				sel = window.getSelection();
				sel.removeAllRanges();
				
				newRange = document.createRange();
				newRange.selectNodeContents(container);
				
				sel.addRange(newRange);
			
			}
				
		} else {										
			
			if(buttonState == 1 && styleName == "text-decoration"){	
					
					
					textDecorationOff(buttonName, styleValue);		
									
			} else {
				
				
				
				if(range.commonAncestorContainer.nodeType  == 1){
				
					
				
					if(butter.buttonState[buttonName] == 0){
						butter.buttonState[buttonName] = 1;
						
						
						setCSS(range.commonAncestorContainer, styleName, butter.buttonMatchOn[buttonName], 1)
				
					} else {
						butter.buttonState[buttonName] = 0;
						
						
						
						setCSS(range.commonAncestorContainer, styleName, butter.buttonMatchOff[buttonName], 0)
						
					}
					
					common = range.commonAncestorContainer;	
					
					$(common).find("span").each(function(){
						if(butter.buttonState[buttonName] == 0){	
							if(member1(styleName, $(this).css(styleName), butter.buttonOnStates[buttonName])){
								$(this).css(styleName, butter.button_MatchOff[styleName]);
							}
						} else if (butter.buttonState[buttonName] == 1){
							
							if(member1(styleName, $(this).css(styleName),butter.buttonOffStates[buttonName])){
								$(this).css(styleName, butter.button_Match[styleName]);
							}		
						}
					});	
					
					
					sel = window.getSelection();
					sel.removeAllRanges();
					
					newRange2 = document.createRange();
					newRange2.selectNodeContents(common);
					
					sel.addRange(newRange2);
	
				} else if(range.commonAncestorContainer.nodeType == 3){
					

					
					if(butter.buttonState[buttonName] == 0){
						butter.buttonState[buttonName] = 1;
						$(range.commonAncestorContainer.parentNode).css(styleName, butter.button_Match[styleName]);	
					} else {
						butter.buttonState[buttonName] = 0;
						$(range.commonAncestorContainer.parentNode).css(styleName, butter.button_MatchOff[styleName]);	
					}
					
					common = range.commonAncestorContainer.parentNode;
					
					sel = window.getSelection();
					sel.removeAllRanges();
					
					newRange2 = document.createRange();
					newRange2.selectNodeContents(common);
					
					sel.addRange(newRange2);	
					
					
				}
			}
		}	
		
		if(butter.buttonState[buttonName] == 0){
			
				$(this).find("img").css({
					"border-top": "none",
					"border-right": "none"
				});
	
		} else {
				$(this).find("img").css({
					"border-top": "1px solid black",
					"border-right": "1px solid black"
				})	
		}
		
	});
	
	//Clear and reorganize spans. Smooth things out, delete extra ones
	$(document).bind("click", function(){
		if(window.getSelection() == ''){
			cleanSpans();	
		}	
	});
	
	$("span").bind("mousedown", function(){
		state.mousedown = true;
	});
	
	$(document).bind("mousedown", function(event){
		if(event.target.nodeName != "SPAN"){
			state.mousedown = false;	
		}
	})
	
	
	$(document).bind("mouseup", function(){
		if(state.mousedown == true) {
			checkButtonState();
			
		} else if(window.getSelection() == ''){
			$("#italicButton img").css({
				"border-top": "none",
				"border-right": "none"
			});
		}
	});
	
		var rangeBar = document.createElement("div");	
		$(rangeBar).css({
			"height": "30px",
			"position": "fixed",
			"width": "auto",
			"bottom": "6px",
			"left" : "0px"
		})
		
		var blendRange = document.createElement("button");
		
		$(blendRange).text("Blend");
		
		$(blendRange).bind("click", {"blend": blendRangeFunc},function(event){
			
			sel = window.getSelection()
			
			range = sel.getRangeAt(0);
			
			com = range.commonAncestorContainer.parentNode;
			
			addTextDecoration(com, "overline");
			
			
			/*
			var range = window.getSelection().getRangeAt(0);
			
			t = range.extractContents();
			
			t = blendRangeFunc(t);
			
			range.insertNode(t);
			*/

			

		});
		
		$(blendRange).appendTo(rangeBar);
		
		var mergeRangeButton = document.createElement("button");
		
		$(mergeRangeButton).text("Merge");
		
		$(mergeRangeButton).bind("click", function(){
			var range = window.getSelection().getRangeAt(0);
			
			var startContainer = range.startContainer;
			
			var temp = range.extractContents();	
		
			temp = mergeRangeFunc(temp, null);
			
			range.insertNode(temp);
			
			for(i=0; i< temp.parentNode.childNodes.length; i++){
				if(temp.parentNode.childNodes[i].nodeName == "SPAN" && temp.parentNode.childNodes[i].textContent == ""){
					$(temp.parentNode.childNodes[i]).remove();
				}
			}

		});
		
		$(mergeRangeButton).appendTo(rangeBar);
		
		
		$("body").append(rangeBar);
		
		
		
	
	
})
	
	

</script>

<style type="text/css">
	#kobe{
		position: absolute;
	}
</style>

</head>

<body>

	<div id="kobe">
    <div>
    <span id="garnett">kobe bryant k<span id="inside" style="font-weight: bold; text-decoration:underline line-through">evin garn</span>ett lebron james</span>
    </div>
     </div>
    


</body> 
</html>
